<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<script type="text/javascript">
    function weather() {
        $("#webserviceMenu").hide();
        $("#weather").fadeIn();
    }

    function phone() {
        $("#webserviceMenu").hide();
        $("#phone").fadeIn();
    }

    function searchWeatber() {
        var cityName = $("#cityMes").val();
        $.ajax({
            url: "ws/queryWeather.sls",
            type: "post",
            data: {
                "cityName": cityName
            },
            dataType: "json",
            success: function (result) {
                var list = result.data;
                var mes = "";
                for (var i = 0; i < list.length; i++) {
                    console.log(list[i].toString());
                    mes += list[i] + "\n";
                }
                $("#weatherMes").val(mes);
            },
            error: function () {
                window.location.href = "error.sls";
            }
        });


    }
    function searchPhone() {
        var phoneNum = $("#phoneNum").val();
        $.ajax({
            url: "ws/queryPhone.sls",
            type: "post",
            data: {
                "phoneNum": phoneNum
            },
            dataType: "json",
            success: function (result) {
                $("#phoneLocation").val(result.data);
            },
            error: function () {
                window.location.href = "error.sls";
            }
        });

    }
</script>
<!-- main -->
<div id="webserviceMenu">
    <div class="msg-a" onclick="weather();">天气预报</div>
    <div class="msg-b" onclick="phone();">手机归属地</div>
</div>

<div id="weather" style="display: none;">
    <div class="msg-a">
        <input id="cityMes" type="text"> <input type="button" value="&nbsp;查    询&nbsp;" onclick="searchWeatber();">
    </div>

    <div>
        <textarea style="width:350px;height:250px;
            -webkit-border-radius:7px;
            border-top:solid 1px #e0e0e0; 
            margin-left:290px;
            background-color:#f3c598;
            border:solid 1px #e8b084; 
            color:#222;resize: none;"
                  id="weatherMes" type="text" readonly="readonly" ></textarea>
    </div>
</div>
<div id="phone" style="display: none;">
    <div class="msg-a">
        <input id="phoneNum" type="text"> <input type="button" value="&nbsp;查    询&nbsp;" onclick="searchPhone();">
    </div>
    <div>
        <input style="width:280px;height:50px;
            -webkit-border-radius:7px;
            border-top:solid 1px #e0e0e0; 
            margin-left:330px;
            background-color:#f3c598;
            border:solid 1px #e8b084; 
            color:#222;" id="phoneLocation" type="text" readonly="readonly">
    </div>
</div>